<template>
  <view>
    <!-- 搜索区域 -->
    <uni-card>
      <!-- <view class="rank-warp" v-if="rankList.length > 0">
        <image src="/static/rank-bg.jpg" class="w100 h-152" mode=""></image>
        <image src="/static/icon_tx.png" class="w-130 h-130 two" mode=""></image>
        <image src="/static/two.png" class="w-110 h-60 second" mode=""></image>
        <view class="twoTxt">
          <view>李四</view>
          <view>98积分</view>
        </view>
        <image src="/static/icon_tx.png" class="w-130 h-130 one" mode=""></image>
        <image src="/static/one.png" class="w-110 h-60 first" mode=""></image>
        <view class="oneTxt">
          <view>张三</view>
          <view>100积分</view>
        </view>
        <image src="/static/icon_tx.png" class="w-130 h-130 three" mode=""></image>
        <image src="/static/three.png" class="w-110 h-60 third" mode=""></image>
        <view class="threeTxt">
          <view>王五</view>
          <view>97积分</view>
        </view>
      </view> -->
      <view v-if="flag == 'student'">
        <view class="rowsb rowsm mb-20 mt-20">
          <scroll-view scroll-x="true" style="white-space: nowrap;">
            <view class="rows rowsm h100">
              <view class="pl-20 pr-20 w-120 h-52 rowsc rowsm br-26 fs-26 mr-20" v-for="item in list" :key="item.id"
                @click="changeActive(item.id)"
                :style="active == item.id ? 'color: #fff;background: linear-gradient(to bottom,#4897FF,#4878FF);' : 'background-color: #F4F4F4;color: #666;'">
                {{ item.title }}</view>
            </view>
          </scroll-view>
        </view>
        <view class="rowsb rowsm mb-20 mt-20">
          <scroll-view scroll-x="true" style="white-space: nowrap;">
            <view class="rows rowsm h100">
              <view class="pl-20 pr-20 w-120 h-52 rowsc rowsm br-26 fs-26 mr-20" v-for="item in list1" :key="item.id"
                @click=" active == 1 ? getStudentAll(item.id, active2) : getTaskAllSchool(item.id, active2)"
                :style="active1 == item.id ? 'color: #fff;background: linear-gradient(to bottom,#4897FF,#4878FF);' : 'background-color: #F4F4F4;color: #666;'">
                {{ item.title }}</view>
            </view>
          </scroll-view>
        </view>
        <view class="rowsb rowsm mb-20 mt-20">
          <scroll-view scroll-x="true" style="white-space: nowrap;">
            <view class="rows rowsm h100">
              <view class="pl-20 pr-20 w-120 h-52 rowsc rowsm br-26 fs-26 mr-20" v-for="item in list2" :key="item.id"
                @click="active == 1 ? getStudentAll(active1, item.id) : getTaskAllSchool(active1, item.id)"
                :style="active2 == item.id ? 'color: #fff;background: linear-gradient(to bottom,#4897FF,#4878FF);' : 'background-color: #F4F4F4;color: #666;'">
                {{ item.title }}</view>
            </view>
          </scroll-view>
        </view>
      </view>
      <view v-else>
        <view class="rowsb rowsm mb-20 mt-20">
          <scroll-view scroll-x="true" style="white-space: nowrap;">
            <view class="rows rowsm h100">
              <view class="pl-20 pr-20 w-120 h-52 rowsc rowsm br-26 fs-26 mr-20" v-for="item in list" :key="item.id"
                @click="changeTeachActive(item.id)"
                :style="active1 == item.id ? 'color: #fff;background: linear-gradient(to bottom,#4897FF,#4878FF);' : 'background-color: #F4F4F4;color: #666;'">
                {{ item.title }}</view>
            </view>
          </scroll-view>
        </view>
        <view class="rowsb rowsm mb-20 mt-20">
          <scroll-view scroll-x="true" style="white-space: nowrap;">
            <view class="rows rowsm h100">
              <view class="pl-20 pr-20 w-120 h-52 rowsc rowsm br-26 fs-26 mr-20" v-for="item in list2" :key="item.id"
                @click="changeTeachActive(active1, item.id)"
                :style="active2 == item.id ? 'color: #fff;background: linear-gradient(to bottom,#4897FF,#4878FF);' : 'background-color: #F4F4F4;color: #666;'">
                {{ item.title }}</view>
            </view>
          </scroll-view>
        </view>
      </view>
    </uni-card>
    <uni-card style="overflow: unset;">
      <view class="w100 rowsb rowsm h-100 fs-30 fw-b col333 pr-24 pl-15" style="background-color: #F7F6FA;">
        <view class="w-80 h100 rowsc rowsm">排名</view>
        <!-- <view class="w-220 h100 rowsc rowsm">学院</view> -->
        <view class="w-150 h100 rowsc rowsm">姓名</view>
        <view class="w-150 h100 rowsc rowsm">班级</view>
        <view class="w-120 h100 rowsc rowsm">分数</view>
      </view>

      <view class="w100 h-102 rowsb rowsm fs-30 col333 pr-24 pl-15" v-for="(item, index) in rankList" :key="index"
        :style="{ 'background-color': index % 2 != 0 ? '#F7F6FA' : '#fff' }">
        <view class="w-60 h100 rowsc rowsm">{{ index + 1 }}</view>
        <!-- <view class="w-220 h100 rowsc rowsm">{{item.xyName}}</view> -->
        <!-- <view class="w80 h100 rowsc rowsm">{{ item.studentUserName }}</view> -->
        <view class="w-150 h100 rowsc rowsm">
          <uni-tooltip :content="item.studentUserName" placement="top" v-if="item.studentUserName.length > 3">
            <view>{{ item.studentUserName.length > 3 ? (item.studentUserName.slice(0, 3) + '...') : item.studentUserName }}</view>
          </uni-tooltip>
          <view v-else class="bjNameStyle">{{ item.studentUserName }}</view>
        </view>
        <view class="w-150 h100 rowsc rowsm">
          <uni-tooltip :content="item.bjName" placement="top" v-if="item.bjName.length > 3">
            <view>{{ item.bjName.length > 3 ? (item.bjName.slice(0, 3) + '...') : item.bjName }}</view>
          </uni-tooltip>
          <view v-else class="bjNameStyle">{{ item.bjName }}</view>
        </view>
        <view class="w-120 h100 rowsc rowsm">{{ item.score }}积分</view>
      </view>

      <!-- <view class="rank-list" v-if="rankList">
      <view class="rank-item" v-for="(item, index) in rankList" :key="item.id">
        <text class="serialNum">{{ index + 1 }}</text>
        <image src="/static/icon_tx.png" class="w-80 h-80" mode=""></image>
        <text class="name">{{ item.studentUserName }}</text>
        <text class="class">{{ item.bjName }}</text>
        <text class="score">{{ item.score }}积分</text>
      </view>
    </view> -->
      <view class="notYet" v-if="rankList.length == 0">
        暂无数据
      </view>
    </uni-card>

  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, title: '总分榜' },
        { id: 2, title: '任务榜' },
      ],
      list1: [
        { id: 1, title: '全校榜' },
        { id: 2, title: '年级榜' },
        { id: 3, title: '班级榜' }
      ],
      list2: [
        { id: 1, title: '周榜' },
        { id: 2, title: '月榜' },
        { id: 3, title: '年榜' }
      ],
      active: 1,
      active1: 1,
      active2: 1,
      stNumberOrName: '',
      rankList: [],
      weekStartTime: this.getWeekStart(),
      endTime: this.getNewDate(),
      yearStartTime: new Date().getFullYear(),
      flag: ''
    };
  },
  onLoad() {
    this.flag = uni.getStorageSync('flag');
    // uni.setNavigationBarColor({
    //   frontColor: '#000000',   //字体颜色
    //   backgroundColor: '#0091FF'    //背景颜色
    // })
    if (this.flag == 'student') {
      this.getStudentAll(this.active1, this.active2);
    } else {
      this.getTeachAll(this.active2);
    }
  },
  methods: {
    // 获取今天
    getNewDate() {
      const today = new Date();  // 获取当前日期
      const year = today.getFullYear();
      const month = String(today.getMonth() + 1).padStart(2, '0');  // 获取月份，并确保是2位数
      const day = String(today.getDate()).padStart(2, '0');  // 获取日期，并确保是2位数

      return `${year}-${month}-${day} 23:59:59`;
    },
    // 获取所在周的周一日期
    getWeekStart() {
      const today = new Date();  // 获取当前日期
      const day = today.getDay();  // 获取当前是星期几，0表示周日，1表示周一，... 6表示周六
      // 计算距离周一的天数，当前是周日时需要向前回退一天
      const diff = day === 0 ? -6 : 1 - day;  // 如果是周日，diff为-6，否则是1-day
      // 设置周一的日期
      today.setDate(today.getDate() + diff);
      // 设置时间为当天的00:00:00
      today.setHours(0, 0, 0, 0);
      const year = today.getFullYear();
      const month = String(today.getMonth() + 1).padStart(2, '0');
      const dayNum = String(today.getDate()).padStart(2, '0');

      return `${year}-${month}-${dayNum} 00:00:00`;
    },

    // 获取所在月的1号日期
    getMonthStart() {
      const today = new Date();  // 获取当前日期
      const year = today.getFullYear();
      const month = String(today.getMonth() + 1).padStart(2, '0');

      return `${year}-${month}-01 00:00:00`;
    },
    // 切换类型  学生
    changeActive(type) {
      this.active = type;
      if (type == 1) {
        this.getStudentAll(this.active1, this.active2);
      } else if (type == 2) {
        this.getTaskAllSchool(this.active1, this.active2);
      }
    },
    // 教师
    changeTeachActive(type, active) {
      this.active1 = type;
      if (active) {
        this.active2 = active;
      }
      if (type == 1) {
        this.getTeachAll(this.active2);
      } else if (type == 2) {
        this.getTaskTeachAllSchool(this.active2);
      }
    },
    // 总榜 学生
    getStudentAll(type, timeType) {
      this.active1 = type;
      this.active2 = timeType;
      this.rankList = [];
      const data = {
        startTime: timeType == 1 ? this.weekStartTime : timeType == 2 ? this.getMonthStart() : this.yearStartTime + '-01-01 00:00:00',
        endTime: this.endTime
      }
      const urlName = type == 1 ? 'ranking/studentAllSchool' : type == 2 ? 'ranking/studentAllGrade' : 'ranking/studentAllClass'
      this.$tools.axiosFromToken('GET', urlName, data, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg)
        this.rankList = res.rows;
      })
    },
    // 教师
    getTeachAll(timeType) {
      // this.active2 = timeType;
      this.rankList = [];
      const data = {
        startTime: this.active2 == 1 ? this.weekStartTime : this.active2 == 2 ? this.getMonthStart() : this.yearStartTime + '-01-01 00:00:00',
        endTime: this.endTime
      }
      this.$tools.axiosFromToken('GET', 'ranking/teacherAllSchool', data, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg)
        this.rankList = res.rows;
      })
    },
    // 任务  学生
    getTaskAllSchool(type, timeType) {
      this.active1 = type;
      this.active2 = timeType;
      this.rankList = [];
      const data = {
        startTime: timeType == 1 ? this.weekStartTime : timeType == 2 ? this.getMonthStart() : this.yearStartTime + '-01-01 00:00:00',
        endTime: this.endTime
      }
      const urlName = type == 1 ? 'ranking/taskStudentAllSchool' : type == 2 ? 'ranking/taskStudentGrade' : 'ranking/taskStudentClass'
      this.$tools.axiosFromToken('GET', urlName, data, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg)
        this.rankList = res.rows;
      })
    },
    // 教师
    getTaskTeachAllSchool(timeType) {
      // this.active2 = timeType;
      this.rankList = [];
      const data = {
        startTime: this.active2 == 1 ? this.weekStartTime : this.active2 == 2 ? this.getMonthStart() : this.yearStartTime + '-01-01 00:00:00',
        endTime: this.endTime
      }
      this.$tools.axiosFromToken('GET', 'ranking/taskTeacherAllSchool', data, '加载中').then(res => {
        if (res.code != 200) return this.$tools.showtt(res.msg)
        this.rankList = res.rows;
      })
    },

  }
}
</script>

<style lang="scss">
page {
  background-color: #f4f5f7;
}

.active {
  color: #0091ff;
}

.top-content {
  width: 100%;
  // height: 300px;
  background: #f4f5f7;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
  position: relative;
}

.title-warp {
  width: 70%;
  // text-align: center;
  margin: 0 auto;
  height: 25px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #a8a8a8;
  // color: #afd3f0;

  text {
    font-size: 28rpx;
  }
}

.bjNameStyle {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.txt-warp {
  width: 50%;
  // text-align: center;
  margin: 0 auto;
  height: 25px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #a8a8a8;
  // color: #afd3f0;

  text {
    font-size: 28rpx;
  }
}

.notYet {
  margin-top: 50rpx;
  width: 100%;
  text-align: center;
  font-weight: 0 !important;
  font-size: 42rpx;
}

::v-deep .uni-tooltip-popup {
  width: 90px !important;
  left: -5px !important;
}

.rank-warp {
  width: 100%;
  position: absolute;
  bottom: -5px;

  .two {
    position: absolute;
    left: 48px;
    top: -48px;
  }

  .second {
    position: absolute;
    left: 53px;
    top: -80px;
  }

  .twoTxt {
    position: absolute;
    left: 48px;
    top: 37px;
    text-align: center;
    font-size: 14px;
  }

  .one {
    position: absolute;
    left: 170px;
    top: -68px;
  }

  .first {
    position: absolute;
    left: 174px;
    top: -100px;
  }

  .oneTxt {
    position: absolute;
    left: 177px;
    top: 17px;
    text-align: center;
    font-size: 14px;
  }

  .threeTxt {
    position: absolute;
    right: 59px;
    bottom: 15px;
    text-align: center;
    font-size: 14px;
  }

  .three {
    position: absolute;
    right: 45px;
    bottom: 64px;

  }

  .third {
    position: absolute;
    right: 50px;
    bottom: 135px;
  }
}

.rank-list {
  padding: 0 10px;

  .rank-item {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eaeaea;

    .serialNum {
      width: 10%;
    }

    image {
      width: 10%;
    }

    .name {
      width: 20%;
      text-align: center;
    }

    .class {
      width: 40%;
      // 溢出显示省略号
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .score {
      width: 20%;
      font-size: 14px
    }
  }
}
</style>
	